<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>

    <el-row :gutter="0">
      <el-col :span="24" class="mb-5">
        <el-radio-group v-model="formModel.publishType">
          <el-radio :label="1">公开</el-radio>
          <el-radio :label="2">非公开</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="24">

        <el-select class="w200px mr-3"  v-model="formModel.topicId"  placeholder="选择专题">
          <el-option v-for="item in dataOfGroups" :key="item.id" :label="item.topicName" :value="item.id" />
        </el-select>
<!--        <el-transfer   :titles="['请选择', '已选择']" v-model="formModel.topicId" :data="dataOfGroups" :props="{key: 'id',label: 'topicName'}" />-->
      </el-col>
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">关闭</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { roleParams } from '@/apis/model/RoleModel';
import { getNewObj } from '@/utils/EsCommon';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);

// 表单数据
const formAttrs = {
  id:null, // ID
  topicId: null,//课程名称
  publishType: 1,//课程名称
  isPublish: 1,//公开

};
// 请选择系统类型

const generateData = () => {
  const data = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}
const dataOfGroups = ref([]);
const dataTree = ref(generateData());

// 表单组件的引用实例
const formRef = ref(null);
// 表单校验规则
const formRules = ref({
  // roomName: [
  //   { required: true, message: '请输入标题', trigger: 'blur' },
  // ],

})



const formModel = ref(Object.assign({}, formAttrs));

const uploadRef = ref(null)

// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '340px',
})
// 表单组件的引用实例

// ======================================================
//                      点击操作
// ======================================================


// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (id, title, item = null, width = '340px') => {
  console.log(item)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  if (id) {
    formModel.value = formAttrs;
    formModel.value.id = id
  }
  loadTreeData()
}

const loadTreeData = () => {
  EsAjax.post(ApiUrls.topicList, {}).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list, count } = res.data.data
    dataOfGroups.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}


// 点击提交按钮
const onSubmit = () => {
  console.log('submit!', formModel.value);

  // if(!formModel.value.topicId.length){
  if(!formModel.value.topicId){
    ElMessage.warning('请选择专题');
    return
  }
    const form = JSON.parse(JSON.stringify(formModel.value))
    console.log(form)
    // form.topicId = form.topicId.join(',')
    EsAjax.post(ApiUrls.recordTaskChangeIsPublish, form).then(res => {
      if (res.data.code !== 200) {
        ElMessage.warning(res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })


}




defineExpose({
  show
})
</script>

<style scoped>
</style>
